<template>
  <el-upload action="http://dspt.test/api/upload_admin" :file-list="localImageList" accept="image/jpeg,image/jpg,image/png" :before-upload="handleUpload" :on-success="handleSuccess" :on-remove="handleRemove">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1M</div>
  </el-upload>
</template>

<script>
export default {
  // 全局感知
  name: "ImageUploader",

  // 模板依赖
  components: {},
  filters: {},

  // 接口
  props: {
    imageList: {
      type: Array,
      required: true
    }
  },

  // 本地状态
  data () {
    return {
      localImageList: this.imageList
    };
  },
  computed: {},

  // 事件
  watch: {
    imageList (list) {
      this.localImageList = list
    },
    localImageList (list) {
      console.log(list);
      this.$emit('update:imageList', list)
    }
  },
  beforeCreate () { },
  created () { },
  beforeMount () { },
  mounted () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },

  // 非响应式的属性
  methods: {
    handleUpload (file) {
      const { size } = file
      if (size > 1000 * 1000) {
        this.$message.error('图片体积过大')
        return false
      }
      return file
    },
    handleSuccess (response) {
      const { data: { file_name, url } } = response
      this.localImageList.push({ name: file_name, url })
    },
    handleRemove (file, fileList) {
      this.localImageList = fileList
    }
  }
}
</script>

<style scoped>

</style>